<template>
<div class="actualNameUpdate">
  <!--header start-->
  <header class="header-con header-w-bg">
    <router-link to="/setting/userInfo">
      <i class="back-icon"></i>
    </router-link>
    <h1 class="header-tit">真实姓名</h1>
  </header>
  <!--header end-->
  <!-- content start -->
  <div class="my-page">
    <div class="actualName">
      <ul class="myData-list">
        <li class="flex-box">
          <label>姓氏</label>
          <div class="list-flex">
            <input type="text" placeholder="请输入您的姓氏" v-model="userInfo.surName">
          </div>
          <i class="right-icon"></i>
        </li>
        <li class="flex-box">
          <label>名字</label>
          <div class="list-flex">
            <input type="text" placeholder="请输入您的名字" v-model="userInfo.userName">
          </div>
          <i class="right-icon"></i>
        </li>
      </ul>
      <p class="tip-err">错误信息提示。</p>
      <a href="javascript:void(0);" class="save-btn" @click="saveInfo">
        <div class="org-btn">保存</div>
      </a>
    </div>
  </div>
  <!-- content end -->
</div>
</template>

<script>
  import qs from 'qs'
  import {saveUserInfo} from '../../../assets/js/saveUserInfo'
  import common from '../../../assets/js/common'

  export default {
    data () {
      return {
        userInfo: {
          userName: '',
          surName: ''
        },
        result: {
          'resultCode': '',
          'resultMsg': '',
          'content': false,
          'accessToken': null
        }
      }
    },
    created: function () {
      this.userInfo.userName = this.$route.params.userName === 'null' ? '' : this.$route.params.userName
      this.userInfo.surName = this.$route.params.surName === 'null' ? '' : this.$route.params.surName
    },
    methods: {
      saveInfo: function () {
        let userId = common.userid
        let data = qs.stringify({
          'userId': userId,
          'userName': '',
          'nickName': this.userInfo.nickName,
          'userSerName': this.userInfo.surName,
          'idCardNo': '',
          'email': '',
          'imageUrl': ''
        })
        saveUserInfo(data, this)
      }
    }
  }
</script>

<style lang='scss'>
  .actualName {
    margin-top: 20px;
  }

  .tip-err {
    padding: 0 16px;
    color: #ff0629;
    font-size: 1.2rem;
  }

  .actualName .save-btn {
    display: block;
    margin-top: 36px;
    padding: 0 16px;
  }
  .org-btn {
    display: inline-block;
    width: 100%;
    height: 45px;
    line-height: 45px;
    text-align: center;
    font-size: 1.7rem;
    color: #434343;
    background-image: linear-gradient(-90deg, #ffd800 0%, #ffd800 99%);
    box-shadow: 0 8px 23px 0 rgba(255, 216, 0, 0.3);
    border-radius: 45px;
  }

  .o-org-btn {
    display: inline-block;
    width: 100%;
    height: 45px;
    line-height: 45px;
    text-align: center;
    border: 1px solid #ffd800;
    font-size: 1.7rem;
    color: #ffd800;
  }
</style>
